<template>
	<view>
		<u-navbar :title="title" :title-size="24" title-color="#000" :background="background" :border-bottom="false">
			<view class="slot-wrap" v-show="type!='area'">
				<u-button @click="submit" :disabled="disabled" shape="square" type="success" size="mini" :custom-style="customStyle">完成</u-button>
			</view>
		</u-navbar>
		<view class="content" v-show=" type=='nickname' || type=='account' || type=='signature' || type=='work' || type=='company'">
			<!-- 正文内容 -->
			<u-input v-model="contentValue" 
			@focus="onFocus"
			@blur="onBlur"
			@input="onInput"
			maxlength="20" placeholder="" 
			type="text" 
			:style="{ borderBottom: borderBottomStyle }"
			style="margin:0 20px;"
			:border="border" />
		</view>
		<view class="content" v-show=" type=='area'">
			<!-- 地区 -->
			<u-cell-group>
				<u-cell-item @click="area({text:item.title})" v-for="(item, index) in groupList" :center="true" :key="index" :title="item.title" :title-style="{ marginLeft: '10rpx',}">
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import { api } from '../../api/api';
import { myRequest } from '../../util/api';

 
	export default {
		data() {
			return {
				value: '',
				title: '',
				type: '',
				background: {
					backgroundColor: '#f8f8f8',
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				customStyle: {
					height: '30px',
					fontSize: '12px'
				},
				contentValue: '',
				border: false,
				disabled: true,
				borderBottomStyle: '1px solid #d8d8d8', // 初始下边框样式
				groupList: [
						{ 'title': '北京市' },
					    { 'title':  '上海市' },
					    { 'title':  '广州市' },
					    { 'title':  '深圳市' },
				],
			};
		},
		onLoad:function(option){
			// type：userName,wechatNumber,sex,address,signature
			this.title = option.title
			this.type = option.type
			this.value = option.value
			this.contentValue = option.value
		},
		methods: {
			submit() {
				// 调用更改个人信息接口
				// 修改本地存储的个人信息
				this.$store.commit('$uStore', { name: `_user_info.${this.type}`, value: this.contentValue });
				let datas = { field:this.type, value: this.contentValue };
				this.updateInfo(datas);
			},
			onFocus() {
				this.borderBottomStyle = '1px solid #19be6b'; // 获取焦点时显示下边框
			},
			onBlur() {
				this.borderBottomStyle = '1px solid #d8d8d8'; // 失去焦点时隐藏下边框
			},
			onInput() {
				this.disabled = false; // 输入框有变化时启用按钮
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				this.disabled = false;
			},
			area(area) {
				this.$store.commit('$uStore', { name: `_user_info.${this.type}`, value: area.text });
				let datas = { field:this.type, value: area.text };
				this.updateInfo(datas);
			},
			
			// 调用更改信息api
			async updateInfo(datas){
				const response = await myRequest({
					url: api.updateUserInfo,
					method: 'POST',
					data: {
						field: datas.field,
						value: datas.value,
					},
					success: (res) => {
						if (res.data.code === 200 && res.data.httpCode === 200) {
							// 处理成功的逻辑
							uni.navigateBack();
						} else {
							// 处理失败的逻辑
							uni.showToast({
								title: '信息更新失败:️'+response.data.message,
								position: "bottom"
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		position: absolute;
		right: 0;
		align-items: center;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}
</style>
